<link href="//cdn.bootcss.com/switchery/0.8.2/switchery.min.css" rel="stylesheet">
<style scoped>
	.setting-body {
		background: #fff;
		padding: 20px; 
	}
	.setting-body .block {
		overflow: hidden; 
	}
	.setting-body .block .h1 {
		font-size: 16px;
		font-weight: 300;
		line-height: 35px;
		border-bottom: solid 1px #eee;
		padding-bottom: 8px; 
	}
	.setting-body .block .h1_1{border-bottom:none;}
	.setting-body .block .content {
		margin: 15px 0 20px 50px; 
	}
	.setting-body .block .content .script-text {
		width: 800px;
		background: #f4f4f4;
		color: #333;
		font-size: 14px;
		border: none;
		padding: 10px; 
	}
	.setting-body .block .code code {
		font-size: 12px;
		margin: 0 3px; 
	}
	.setting-body .block-center {
		width: 500px;
		margin-left: 150px; 
	}
	.setting-body .block-two {
		overflow: hidden; 
	}
	.setting-body .block-two .block-center {
		width: 500px; 
	}
	.setting-body .block-two .onepart {
		width: 40%;
		float: left;
		margin-right: 10%; 
	}
	.button {
		width: 300px;
		height: 45px;
		background: #2077ff;
		color: #fff;
		border: none;
		font-size: 16px;
		border-radius: 3px;
		cursor: pointer;
		margin:20px 0;
		display:block;
		margin-left:70px;
	}
	.setting-body .item {
		margin-bottom: 20px;
		font-size: 14px; 
	}
	.setting-body .item .left {
		display: inline-block;
		width: 150px;
		text-align: right; 
	}
	.setting-body .item input {
		height: 40px;
		background: #f4f4f4;
		border: none;
		width: 300px;
		padding-left: 10px; 
	}
	.setting-body p{
		font-size:14px;
		color:#999;
		line-height:30px;
	}
	@media (max-width: 768px) {
		.setting-body .block .content {
			margin: 15px 0 20px 5px;
		}
		.content .btn{
			margin-bottom:5px;
		}
		.com_slide_tab_x .item{
			padding:0;
			margin-right:20px;
		}
		.setting-body .block-center{
			margin-left:0;
		}
		.setting-body{
			margin: 10px;
    		padding: 10px;
		}
		.setting-body .item{
			font-size:12px;
		}
		.setting-body .item .left{
			width:120px;
		}
		.setting-body .block-two .onepart {
			width: 100%;
		}
		.margin_left{
			margin-left:0;
		}
	}
</style>
<div class="com_content_body main pb100" id="vue_id" v-cloak>
	<h1 class="com_h1">新增微信应用</h1>
	<div class="com_slide_tab_x mt30 mb30">
		<div class="item" :class="{'active':lable==1}" @click="checkoutLabel(1)">应用部署</div>
		<div class="item" :class="{'active':lable==2}" @click="checkoutLabel(2)">统计设置</div>
		<div class="item" :class="{'active':lable==3}" @click="checkoutLabel(3)">部署说明</div>
	</div>
	<div class="setting-body">
		<div class="block" v-show="lable==1">
			<h1 class="h1">应用录入</h1>
			<div class="block-center">
				<div class="item mt20">
					<span class="left">appId：</span>
					<input type="text" v-model.trim="query.app_id" placeholder="必填、请填写正确的小程序appId">
				</div>
				<div class="item">
					<span class="left">应用名称：</span>
					<input type="text" v-model.trim="query.system_name" placeholder="必填、输入域名">
				</div>
			</div>
			<h1 class="h1">各项阀值设置</h1>
			<div class="block-center">
				<div class="item mt20">
					<span class="left">AJAX慢加载阀值(s)：</span>
					<input type="text" v-model.trim="query.slow_ajax_time" placeholder="选填、默认2s">
				</div>
			</div>
			<h1 class="h1">1.启用数据接收</h1>
			<div class="content">
				<span class="mr10">是否启用:</span><input type="checkbox" class="js-switch" checked />
			</div>
		</div>
		<div class="block block-two" v-show="lable==2">
			<div class="light">以下皆为非必填项</div>
			<div class="block-center">
				<div class="onepart">
					<h1 class="h1">是否统计AJAX性能指标:</h1>
					<div class="content">
						<span class="mr10">是否启用:</span><input type="checkbox" class="js-switch-item js-switch-1" checked />
					</div>
				</div>
				<div class="onepart">
					<h1 class="h1">是否存储访问者系统信息:</h1>
					<div class="content">
						<span class="mr10">是否启用:</span><input type="checkbox" class="js-switch-item js-switch-2" checked />
					</div>
				</div>
				<div class="onepart">
					<h1 class="h1">是否统计错误信息:</h1>
					<div class="content">
						<span class="mr10">是否启用:</span><input type="checkbox" class="js-switch-item js-switch-3" checked />
					</div>
				</div>
			</div>
		</div>
		<div class="block" v-show="lable==3">
			<h1 class="h1">1.获取SDK代码</h1>
			<div class="content">
				<a href="/public/js/wx-report-sdk.min.js.zip"><button class="btn btn-default">微信小程序SDK</button></a>
			</div>
			<h1 class="h1">2.部署SDK说明</h1>
			<div class="content code">
				<p>在小程序的app.js头部引入一下代码</p>
				<div class="script-text mb20">
					<pre>const wxRepotSdk = require('./utils/wx-report-sdk.min');

new wxRepotSdk({
  domain:'{{location.origin}}/api/v1/wx/report/wx',
  add:{
    appId:'{{query.app_id}}'
  }
})</pre>

				</div>
				<a href="https://github.com/wangweianger/wx-report-sdk" target="_target">微信小程序SDK使用文档</a>
			</div>
		</div>
	</div>
	<div>
		<button class="button left-botton" @click="addSystem" v-if="!isAdd">保存</button>
	</div>
</div>
x
<script src="//cdn.bootcss.com/switchery/0.8.2/switchery.min.js"></script>
<script>
	new Vue({
		el: '#vue_id',
		data: function () {
			return {
				lable: 1, //1:概况 2：pv|uv|ip
				appId: util.getStorage('local', 'appId'),
				query: {
					is_use: 0,
					system_name: '',
					app_id: '',
					type:'wx',
					slow_ajax_time: '',
					is_statisi_pages: 0,
					is_statisi_ajax: 0,
					is_statisi_resource: 0,
					is_statisi_system: 0,
					is_statisi_error: 0,
					user_id: '',
					token:'',
				},
				isAdd: false,
				script: '',
			}
		},
		mounted() {
			let userMsg = util.getStorage('local','userMsg');
			userMsg = userMsg ? JSON.parse(userMsg) : {};
			this.query.token = userMsg.token || '';

			this.settingIsUse();
			this.pagexingneng();
		},
		methods: {
			checkoutLabel(lable) {
				this.lable = lable;
				this.beginTime = '';
				this.endTime = '';
			},
			// 设置项目是否接收数据
			settingIsUse() {
				let elem = document.querySelector('.js-switch');
				elem.checked = true;
				const init = new Switchery(elem, { color: '#8776f7' });
				const _this = this;

				elem.onchange = function () {
					_this.query.is_use = elem.checked ? 0 : 1;
					if (this.isAdd) this.updateSystem();
				};
			},
			addSystem() {
				if (!this.query.app_id) { popup.alert({ title: '请正确填写小程序appId!' }); return false; }
				if (!this.query.system_name) { popup.alert({ title: '请正确填写应用名称!' }); return false; }
				
				util.ajax({
					url: config.baseApi + 'api/v1/system/add',
					data: this.query,
					success: data => {
						this.query = data.data;
						this.isAdd = true;
						this.script = `<script src="${location.origin}/api/v1/report/webscript?appId=${this.query.app_id}&USESDK=FALSE"><\/script>`;
						popup.miss({ title: "操作成功！" });
					}
				})
			},
			// 页面性能指标
			pagexingneng() {
				var elems = Array.prototype.slice.call(document.querySelectorAll('.js-switch-item'));
				elems.forEach((html, index) => {
					html.checked = true;
					var switchery = new Switchery(html, { color: '#2077ff' });
					html.onchange = () => {
						if (!this.query.app_id) { popup.alert({ title: '请正确填写小程序appId!' }); return false; }
						if (!this.query.system_name) { popup.alert({ title: '请正确填写应用名称!' }); return false; }
						
						let value = html.checked ? 0 : 1
						switch (index) {
							case 0:
								this.query.is_statisi_ajax = value;
								break;
							case 1:
								this.query.is_statisi_system = value;
								break;
							case 2:
								this.query.is_statisi_error = value;
								break;
						}
						if (this.isAdd) this.updateSystem();
					}
				});
			},
			updateSystem() {
				util.ajax({
					url: config.baseApi + 'api/v1/system/update',
					data: this.query,
					success: data => {
						popup.miss({ title: '操作成功!' })
					}
				})
			},
		},
	})


</script>